<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <title>我的设置</title>
</head>

<body class="body-gray">

<div class="headwrap">
    <div class="head-top clearfix">
        <div class="logo">
            <a href="javascript:void(0)">
                <img th:src="@{/static/m/img/logo.png}"/>
            </a>
        </div>
        <div class="btn-nav">
            <a th:href="@{/}"><i></i></a>
        </div>
    </div>
    <div class="order-title">
        <i class="iconfont icon-zuojiantou" onclick="window.history.back(-1)"></i>
        <h2>我的设置</h2>
    </div>
    <div class="head-nav">
        <ul>
            <li class="on">
                <a href="javascript:void(0)">
                    个人设置
                    <em></em>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    安全设置
                    <em></em>
                </a>
            </li>
        </ul>
    </div>
</div>


<!--主体内容-->
<div class="identical-purchase-content invoice-apply-content mySet-content">

    <!--我的设置-->
    <div class="mySet-tab-con mySet-page">
        <div class="title clearfix">
            <div class="left">头像</div>
            <div class="right">
                <img th:if="${user.portrait eq null}"
                     th:src="${#request.getAttribute('ctx') + '/static/m/img/gender/portrait-female.jpg'}">
                <img th:if="${user.portrait ne null and user.gender eq 0}"
                     th:src="${#request.getAttribute('ctx') + '/static/m/img/gender/portrait-female.jpg'}">
                <img th:if="${user.portrait ne null and user.gender eq 1}"
                     th:src="${#request.getAttribute('ctx') + '/static/m/img/gender/portrait-male.jpg'}">
            </div>
        </div>
        <ul>
            <li class="clearfix">
                <div class="left">姓名</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-name" onclick="return false;">
                    [[${user?.name}]]<i class="iconfont icon-youjiantou1"></i></div>
            </li>
            <li class="clearfix">
                <div class="left">昵称</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-nikeName" onclick="return false;">
                    [[${user?.nickname}]]<i class="iconfont icon-youjiantou1"></i></div>
            </li>
            <li class="clearfix">
                <div class="left">性别</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-six" onclick="return false;">
                    <span class="six" cus:dict="gender,${user.gender}"></span><i class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
            <li class="clearfix">
                <div class="left">手机</div>
                <div class="right">[[${user?.mobile}]]</div>
            </li>
            <li class="clearfix">
                <div class="left">微信</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-wx" onclick="return false;">
                    [[${user?.wechat}]]<i class="iconfont icon-youjiantou1"></i></div>
            </li>
            <li class="clearfix">
                <div class="left">QQ</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-qq" onclick="return false;">
                    [[${user?.qq}]]<i class="iconfont icon-youjiantou1"></i></div>
            </li>
            <li class="clearfix">
                <div class="left">邮箱</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-email" onclick="return false;">
                    [[${user?.email}]]<i class="iconfont icon-youjiantou1"></i></div>
            </li>
            <li class="clearfix">
                <div class="left">期望风格</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-style" onclick="return false;">
                    <span class="style" cus:dict="expect,${user.expect}"></span><i
                        class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
            <li class="clearfix">
                <div class="left">制作要求</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-requirementText">
                    <span class="style" th:text="${user.requirementText}"></span><i
                        class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
        </ul>
    </div>

    <!--安全设置-->
    <div class="mySet-tab-con securitySet-page">
        <ul>
            <li class="clearfix">
                <a th:href="@{/personal/safe/mobile}">
                    <div class="left">手机号</div>
                    <div class="right">[[${user.mobile}]]<i class="iconfont icon-youjiantou1"></i></div>
                </a>
            </li>
            <li class="clearfix">
                <div class="left">密码</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-modifyPassword"
                     onclick="return false;">
                    <input class="password" type="password" name="" id="" value="1111111"/><i
                        class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
        </ul>

        <div class="foot-box"></div>
    </div>
</div>


<!--姓名模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-name" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" name="name" th:value="${user.name}" th:placeholder="${user.name}"/>
            </div>
            <p class="tishi">
                <i class="iconfont icon-gantanhao"></i>
                姓名由2-6位汉字组成
            </p>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="name"
               th:attr="data-value=${user.name}">确定</a>
        </div>
    </div>
</div>

<!--昵称模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-nikeName" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" name="nickname" th:value="${user.nickname}" th:placeholder="${user.nickname}"/>
            </div>
            <p class="tishi">
                <i class="iconfont icon-gantanhao"></i>
                昵称为1-6个汉字或12个字符
            </p>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="nickname"
               th:attr="data-value=${user.nickname}" data-toggle="modal" data-target=".bs-example-modal-nikeName">确定</a>
        </div>
    </div>
</div>

<!--性别模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-six" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content modal-content-six">
            <ul class="fp-ul">
                <li data-value="1">
                    <i th:class="${user.gender eq 1 ? 'on' : ''}"></i>
                    <span class="xingbie">男</span>
                </li>
                <li data-value="0">
                    <i th:class="${user.gender eq 0 ? 'on' : ''}"></i>
                    <span class="xingbie">女</span>
                </li>
            </ul>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="gender" th:attr="data-value=${user.gender}"
               data-toggle="modal" data-target=".bs-example-modal-six">确定</a>
        </div>
    </div>
</div>

<!--微信号模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-wx" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" name="wechat" th:value="${user.wechat}" placeholder="微信号"/>
            </div>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="wechat" th:attr="data-value=${user.wechat}"
               data-toggle="modal" data-target=".bs-example-modal-wx">确定</a>
        </div>
    </div>
</div>

<!--QQ模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-qq" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" name="qq" th:value="${user.qq}" placeholder="QQ账号"/>
            </div>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="qq" th:attr="data-value=${user.qq}"
               data-toggle="modal" data-target=".bs-example-modal-qq">确定</a>
        </div>
    </div>
</div>

<!--邮箱模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-email" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" name="email" th:value="${user.email}" placeholder="邮箱"/>
            </div>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="email" th:attr="data-value=${user.email}"
               data-toggle="modal" data-target=".bs-example-modal-email">确定</a>
        </div>
    </div>
</div>

<!--选择风格模态窗-->
<div class="modal fade info-modal bs-example-modal bs-example-modal-style" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <ul class="fp-ul">
                <li th:each="item, index:${dictionaryList}" th:attr="data-value=${item.value}">
                    <i th:class="${item.value eq user.expect ? 'on' : ''}"></i>
                    <span class="fengge" th:text="${item.name}"></span>
                </li>
            </ul>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="expect" th:attr="data-value=${user.expect}"
               data-toggle="modal" data-target=".bs-example-modal-style">确定</a>
        </div>
    </div>
</div>

<!-- 制作要求 -->
<div class="modal fade info-modal bs-example-modal bs-example-modal-requirementText" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <textarea type="text" name="requirementText" th:text="${user.requirementText}" placeholder="制作要求"/>
            </div>
            <p class="tishi">
                <i class="iconfont icon-gantanhao"></i>
                制作要求为300个字以内
            </p>
            <a href="javascript:void(0)" class="btn confirm-btn" data-type="requirementText"
               th:attr="data-value=${user.requirementText}" data-toggle="modal"
               data-target=".bs-example-modal-requirementText">确定</a>
        </div>
    </div>
</div>

<!-- 密码修改模态窗 -->
<div class="modal fade bs-example-modal bs-example-modal-modifyPassword" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <form id="passwordForm">
                <div class="input">
                    <input type="password" name="originPassword" placeholder="输入原密码"/>
                </div>
                <div class="input">
                    <input type="password" name="password" placeholder="输入新密码"/>
                </div>
                <div class="input">
                    <input type="password" name="passwords" placeholder="确定新密码"/>
                </div>
                <div class="input">
                    <input type="text" name="mobile" th:value="${user.mobile}" placeholder="输入手机号" readonly/>
                </div>
                <div class="verify-input">
                    <div class="input message-input">
                        <input type="text" name="validate" placeholder="短信验证码"/>
                    </div>
                    <div class="input verify-btn">
                        <button type="button" class="get-own-sms-code" value="">获取验证码</button>
                    </div>
                </div>
                <p class="tishi" style="color: #ff5722; display: none;">
                    <i class="iconfont icon-gantanhao"></i>
                </p>
                <a href="javascript:void(0)" class="btn" id="update-pwd">确定</a>
            </form>
        </div>
    </div>
</div>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('')"></div>

<script type="text/javascript">
    $(function () {
        // 我的设置tab栏切换
        $('.mySet-tab-con').eq(0).show();
        $('.headwrap .head-nav ul li').each(function (i) {
            $('.headwrap .head-nav ul li').eq(i).click(function () {
                $('.mySet-tab-con').eq(i).show().siblings('.mySet-tab-con').hide();
            });
        });

        $('.modal ul li').click(function () {
            $(this).siblings('li').find('i').removeClass('on');
            $(this).find('i').addClass('on');
            var value = $(this).attr('data-value');
            $(this).parent().parent().find('a').attr('data-value', value);
        })

        $('.info-modal .modal-content input, textarea').on('change', function () {
            var value = $(this).val();
            $(this).parent().parent().find('a').attr('data-value', value);
            $(this).parent().parent().find('.tishi').remove();
        })

        $('.confirm-btn').click(function () {
            var type = $(this).attr('data-type');
            var value = $(this).attr('data-value');

            switch (type) {
                case 'name':
                    var pattern = /^[\u4E00-\u9FA5]{2,6}$/;
                    if ($.trim(value).length == 0) {
                        $('.bs-example-modal-' + type).modal('hide');
                        return false;
                    }
                    if ($.trim(value).length > 0 && !pattern.test(value)) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 不支持的姓名格式</p>');
                        return false;
                    }
                    break;

                case 'nickname':
                    var pattern = /^[\u4e00-\u9fa5]{1,6}$|^[a-zA-Z]{1,12}$/;
                    if ($.trim(value).length == 0) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 昵称不能为空</p>');
                        return false;
                    }
                    if (!pattern.test(value)) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 昵称格式错误</p>');
                        return false;
                    }
                    break;

                case 'wechat':
                    if ($.trim(value).length == 0) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 请输入微信</p>');
                        return false;
                    }
                    if (!Pattern.WECHAT.test(value)) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 微信格式错误</p>');
                        return false;
                    }
                    if ($.trim(value).length > 20) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 超出微信号长度</p>');
                        return false;
                    }
                    break;

                case 'qq':
                    var pattern = /^[1-9][0-9]{4,10}$/gim;
                    if ($.trim(value).length > 0 && !pattern.test(value)) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' QQ号格式错误</p>');
                        return false
                    }
                    break;

                case 'email':
                    var pattern = /^\s*$|^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                    if ($.trim(value).length > 0 && !pattern.test(value)) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 邮箱格式错误</p>');
                        return false
                    }
                    break;

                case 'requirementText':
                    if ($.trim(value).length > 300) {
                        $(this).siblings('p').remove();
                        $(this).before('<p class="tishi"><i class="iconfont icon-gantanhao"></i>' + ' 制作要求长度不能超过300</p>');
                        return false
                    }
                    break;
            }

            $('.bs-example-modal-' + type).modal('hide');

            $.ajax({
                type: 'post',
                url: '/personal/save/' + type,
                data: {
                    param: value
                },
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                        alert(Messages.SUCCESS);
                        location.reload()
                    } else {
                        alert(result.error);
                    }
                },
                error: function (result) {
                    alert(Messages.ERROR);
                }
            })
        })

        $('#update-pwd').click(function () {
            $('#passwordForm').find('.tishi').hide();
            var form = $('#passwordForm').serializeObject();
            var pattern = /^[A-Za-z0-9]{6,16}$/;

            if (!pattern.test(form.originPassword)) {
                $('#passwordForm').find('.tishi').html('<i class="iconfont icon-gantanhao"></i> 原始密码格式错误').attr('style', 'color: #ff5722;');
                return false;
            }

            if (!pattern.test(form.password)) {
                $('#passwordForm').find('.tishi').html('<i class="iconfont icon-gantanhao"></i> 新密码格式错误').attr('style', 'color: #ff5722;');
                return false;
            }

            if (form.password != form.passwords) {
                $('#passwordForm').find('.tishi').html('<i class="iconfont icon-gantanhao"></i> 两次密码不一致').attr('style', 'color: #ff5722;');
                return false;
            }

            if ($.trim(form.validate).length == 0) {
                $('#passwordForm').find('.tishi').html('<i class="iconfont icon-gantanhao"></i> 请输入短信验证码').attr('style', 'color: #ff5722;');
                return false;
            }

            $('.bs-example-modal-modifyPassword').modal('hide');

            $.ajax({
                type: 'post',
                url: '/personal/api/safe/modify-password',
                data: form,
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                        alert(Messages.SUCCESS);
                        location.reload()
                    } else {
                        alert(result.error);
                    }
                },
                error: function (result) {
                    alert(Messages.ERROR);
                }
            })

        })
    })
</script>
</html>
